<template>
  <div class="filter-container">
    <div class="filter-header">
      <span class="filter-title" style="font-size: 1.925rem">筛选</span>
      <span style="font-size: 20px; color: #fff; position: absolute; right: 3%"
        >✕</span
      >
    </div>
    <div class="filter-content">
      <div class="filter-section">
        <span class="filter-label" style="font-size: 2.125rem; margin-top: 10px"
          >选择时间范围</span
        >
        <p
          class="filter-instruction"
          style="font-size: 1.525rem; margin-top: 10px"
        >
          请切换至“近7天”查看已撤销的市价、限价、高级限价委托，且已撤销的委托记录将仅保留2小时
        </p>
        <div class="time-range-buttons" style="margin-top: 10px">
          <button class="time-range-button" style="border-radius: 5px">
            近7天
          </button>
          <button class="time-range-button" style="border-radius: 5px">
            近30天
          </button>
          <button class="time-range-button" style="border-radius: 5px">
            近90天
          </button>
        </div>
        <div class="date-range">
          <input type="date" class="date-input" v-model="startDate" />
          <span class="date-separator">-</span>
          <input type="date" class="date-input" v-model="endDate" />
        </div>
        <div class="calendar-dates" style="margin-top: 20px">
          <div
            style="
              height: 170px;
              margin-top: 20px;
              margin-bottom: 20px;
              display: flex;
            "
          >
            <div style="display: flex; flex-direction: column">
              <div
                style="font-size: 25px; margin-left: 60px"
                v-for="(item, index) in 5"
                :key="index"
                :style="{
                  color: index == 2 ? '#fff' : '#ccc',
                  fontSize: index == 2 ? '25px' : '22px',
                  marginLeft: index != 2 ? '65px' : '60px',
                }"
              >
                2024年
              </div>
            </div>
            <div style="display: flex; flex-direction: column">
              <div
                style="font-size: 25px; margin-left: 20px"
                v-for="(item, index) in 5"
                :key="index"
                :style="{
                  color: index == 2 ? '#fff' : '#ccc',
                  fontSize: index == 2 ? '25px' : '22px',
                  marginLeft: index != 2 ? '22px' : '20px',
                }"
              >
                11月
              </div>
            </div>
            <div style="display: flex; flex-direction: column">
              <div
                style="font-size: 25px; margin-left: 20px"
                v-for="(item, index) in 5"
                :key="index"
                :style="{
                  color: index == 2 ? '#fff' : '#ccc',
                  fontSize: index == 2 ? '25px' : '22px',
                  marginLeft: index != 2 ? '22px' : '20px',
                }"
              >
                11日
              </div>
            </div>
          </div>
        </div>
        <div class="checkbox-container">
          <input type="checkbox" id="hide-cancelled" v-model="hideCancelled" />
          <label for="hide-cancelled">隐藏已撤销委托</label>
        </div>
        <div class="button-container" style="margin-top: 20px">
          <button
            class=""
            style="
              width: 50%;
              height: 40px;
              border-radius: 20px;
              background-color: #000;
              color: #fff;
            "
          >
            重置
          </button>
          <button
            class=""
            style="
              width: 50%;
              height: 40px;
              border-radius: 20px;
              background-color: #fff;
              color: #000;
            "
          >
            确认
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Reg",
  data() {
    return {
      startDate: "2024/10/29",
      endDate: "2024/11/04",
      hideCancelled: false,
      calendarDates: [
        { year: "2567年", month: "10月", day: "6日" },
        { year: "2567年", month: "10月", day: "6日" },
        { year: "2567年", month: "10月", day: "6日" },
        { year: "2567年", month: "11月", day: "7日" },
        { year: "2567年", month: "10月", day: "6日" },
        { year: "2567年", month: "10月", day: "6日" },
        { year: "2567年", month: "10月", day: "6日" },
      ],
    };
  },
};
</script>

<style scoped>
.filter-container {
  background-color: #000;
  color: #fff;
  padding: 20px;
}
.filter-header {
  font-size: 18px;
  margin-bottom: 10px;
}
.filter-label {
  font-size: 16px;
  display: block;
  margin-bottom: 5px;
}
.filter-instruction {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 10px;
}
.time-range-buttons {
  margin-bottom: 10px;
}
.time-range-button {
  background-color: transparent;
  border: 1px solid #ccc;
  color: #ccc;
  padding: 5px 10px;
  margin-right: 10px;
  cursor: pointer;
}
.date-range {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.date-input {
  background-color: transparent;
  border: 1px solid #ccc;
  color: #fff;
  padding: 5px;
  margin-right: 10px;
  width: 45%;
  margin-left: 10px;
  border-radius: 10px;
  height: 3.5rem;
  margin-top: 20px;
}
.date-separator {
  color: #ccc;
}
.calendar-dates {
  display: flex;
  flex-wrap: wrap;
}
.calendar-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
}
.checkbox-container {
  margin-bottom: 10px;
}
.button-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.reset-button,
.confirm-button {
  background-color: transparent;
  border: 1px solid #ccc;
  color: #ccc;
  padding: 5px 10px;
  margin-left: 10px;
  cursor: pointer;
}
.confirm-button {
  border-color: #00ff00;
  color: #00ff00;
}
</style>
